import tools from "../utils/tools";
import navMenuItemTpl from '../templates/nav_menu_item.tpl';

@tools
class HeaderNav {
    constructor(data) {
        this.name = 'HeaderNav';
        this.phoneData = data;
        this.$nav = $('.J_nav');
        this.$navMenu = $('.J_navMenu');
        this.htmlCathe = {};
    }
    init() {
        this.bindEvent();
    }
    bindEvent() {
        this.$nav.on('mouseenter', '.nav-item', $.proxy(this.navMenuMouseIn, this));
    }
    navMenuMouseIn(ev) {
        let $target = $(HeaderNav.getEvTarget(ev)),
            targetField = $target.data('field');
        
        if (!this.htmlCathe[targetField]) {
            this.htmlCathe[targetField] = this.phoneCardData(this.phoneData.filter(item => item.field === targetField));
        }
        this.$navMenu.html(this.htmlCathe[targetField]);
    }
    phoneCardData (data) {
        let list = '';
        data.forEach((item, index) => {
            if (index < 7) {
                list += HeaderNav.tplReplace(navMenuItemTpl, {
                    id: item.id,
                    pic: JSON.parse(item.pics)[0][0][0],
                    phone_name: item.phone_name,
                    default_price: item.default_price,
                    isFirst: !index ? 'first' : ''
                })
            }
        })
        return list;
    }
}

export default HeaderNav;